<script setup lang="ts">
import logoImage from '@/assets/images/logo.png';

defineOptions({
  name: 'Logo',
});

const props = defineProps<LogoProps>();

interface LogoProps {
  /**
   * 是否折叠
   */
  collapsed: boolean;
}

const title = 'fierce-antd';
</script>

<template>
  <div class="logo">
    <img :src="logoImage" alt="LOGO" :class="{ 'mr-2': !props.collapsed }" />
    <div v-show="!props.collapsed" class="font-bold text-lg">
      {{ title }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  line-height: 64px;
  overflow: hidden;
  white-space: nowrap;

  img {
    width: auto;
    height: 32px;
  }
}
</style>
